<template>
  <div class="oe-paper-manage">
    <div class="oe-approval-input">
      考试：
      <a-input v-model="searPaper" class="oe-input" placeholder="输入考试名称" />
      <a-button type="primary">查询</a-button>
      <a-button>清空</a-button>
      发布状态：
      <a-select defaultValue="全部" style="width: 200px" @change="handleChange">
        <a-select-option value="全部">全部</a-select-option>
        <a-select-option value="已发布">已发布</a-select-option>
        <a-select-option value="未发布">未发布</a-select-option>
      </a-select>
    </div>
    <div class="oe-paper-container">
      <div class="oe-exam-item" v-for="(item, index) in paperList" :key="index">
        <div class="oe-item-top">
          <span class="oe-item-split"></span>
          <span class="oe-item-label">考试名称1</span>
        </div>
        <div class="oe-item-content">
          <div class="oe-item-line">
            考试时间： 2020年4月8日 09:59:29- 2020年4月8日 09:59:29
          </div>
          <div class="oe-item-line">
            <div class="oe-line-left">创建人：黄鑫</div>
            <div class="oe-line-right">所属分类：随机考试</div>
          </div>
          <div class="oe-item-line">
            <div class="oe-line-right">要求：暂无要求</div>
          </div>
        </div>
        <div class="oe-item-data">
          <div class="oe-item-data__detail">
            <div class="iconfont icon-yanjing"></div>
            <div class="oe-item-data__name">预览</div>
          </div>
          <div class="oe-item-data__detail">
            <div class="iconfont icon-shezhi"></div>
            <div class="oe-item-data__name">设置题目</div>
          </div>
        </div>
        <div
          class="oe-item-status"
          :style="{ color: type == 1 ? '#808080' : '#F56353', background: type == 1 ? '#E1EAF5' : '#F5E3E1' }"
        >
          {{ type == 1 ? '已发布' : '未发布' }}
        </div>
      </div>
      <div class="oe-item-pagenation">
        <a-pagination
          showQuickJumper
          :defaultCurrent="1"
          :total="49"
          :pageSize="4"
          :showTotal="(total) => `共 ${Math.ceil(total / 4)} 页`"
          @change="changePage"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'paperManage',
  data() {
    return {
      // 搜索
      searPaper: '',
      type: 1,
      // 列表
      paperList: ['1', '2', '3', '4']
    };
  },
  methods: {
    handleChange() {},
    // 改变分页
    changePage(current, pageSize) {}
  }
};
</script>
